<template>
	<view class="content">
		<!--标题栏-->
		<bar-title bgColor='bg-white' :isSolid="false" >
			<block slot="content">确认订单</block>
		</bar-title>
		
		<!-- 地址 -->
		<view  class="address-section arrow" 
			@click="$jumpPages('addressManage', {'source': 1})"
		>

			<view class="address-content" v-if="selectAddress.postalName">
				<view class="cuIcon-location text-cyan"></view>
				<view class="cen">
					<view class="top">
						<text class="name">{{selectAddress.postalName}}</text>
						<text class="mobile">{{selectAddress.phone}}</text>
					</view>
					<text class="address">
						{{selectAddress.provinceName}}{{selectAddress.cityName}}{{selectAddress.areaName}}{{selectAddress.address}}
					</text>
				</view>
				<view class="cuIcon-right"></view>
			</view>
			<view class="empty-address" v-else>
				<view class="left">添加收货地址</view>
				<view class="cuIcon-right"></view>
			</view>
		</view>


		<!-- 商品 -->
		<view class="goods-section" v-if="leisurely.productId">
			<!-- 二手商户 -->
			<view class="shop-warp">
				<view class="avatar-warp">
					<image class="avatar" :src="leisurely.headurl" mode="aspectFill"></image> 
				</view>
				<view class="nickname">{{leisurely.nickname}}</view>
				<view class="cuIcon-right text-gray"></view>
			</view>
			
			<!-- 二手剧本 -->
			<view class="scen-group solid-bottom">
				<view class="scen2  text-gray">
					<view class="scen-img">
						<image :src="leisurely.productIcon" mode="aspectFill"></image>
					</view>
					<view class="scen-info">
						<view class="scen-info-title">
							<text class="title">{{leisurely.scenName}}</text>
							<text  class='cu-tag bg-cyan round sm'>{{leisurely.scenNum}}人本</text>
						</view>
						<view class="publisher">发行商:{{leisurely.scriptPublisher}}</view>
						<view class="text-price">{{leisurely.productDiscountPrice}}</view>
					</view>
				</view>
			</view>
		
			<!-- 运费 -->
			<view class="yt-list solid-bottom">
				<view class="left">运费</view>
				<view class="right">
					<text class="text-price" :class="{'text-through': leisurely.isPackageMail}"
					>{{leisurely.productTransportCosts}}</text>
				</view>
				<view class="action" v-if="!!leisurely.isPackageMail">
					<text class="text-red">包邮</text>
				</view>
			</view>
			
			<!-- 第三方验证 -->
			<view class="yt-list solid-bottom">
				<view class="left" @click="proofScheme=true">选择第三方验证 
					<text class="cuIcon-questionfill text-grey margin-left-sm"></text>
				</view>
				<view class="right" >
					<text class="text-price">{{leisurely.verifyPayable}}</text>
				</view>
				<view class="action" @click="thirdparty=!thirdparty">
					<checkbox class="round cyan sm"
						:class="thirdparty?'checked':''" 
						:checked="thirdparty?true:false" 
						value="1"
					></checkbox>
				</view>
			</view>
		</view>
		
		<view class="scheme" v-if="proofScheme">
			<cu-protocol @btnState="btnProof" :content="leisurely.disclaimer"></cu-protocol>
		</view>
		
		
		<!-- 底部 -->
		<view class="footer text-right">
			<view class="padding">
				<text>实付金额：</text>
				<text class="price-tip">￥</text>
				<text class="price">{{total}}</text>
			</view>
			<button class="submit cu-btn round bg-cyan" @click="onSubmit">提交订单</button>
		</view>
		


	</view>
</template>

<script>
import { mapState } from "vuex";
import cuProtocol from '@/components/protocol.vue';
import { Leisurely } from '@/models/leisurely.js';
import { Address } from '@/models/address.js';
let address = new Address()
let leisurely = new Leisurely()

export default {
	components:{
		cuProtocol
	},
	data() {
		return {
			proofScheme: false, //免责声明面板显示状态
			thirdparty: false, //第三方验证
			leisurely: leisurely.current,
			buttonClicked: 1
		}
	},
	onLoad(option){
		if(!this.leisurely.productId){
			this.$jumpPages('index')
			return
		}
		this.getDefaultAddress()
	},
	computed: {
		...mapState(['selectAddress']),
		total() {
			if(!this.leisurely.productId) return 0
			let discountPrice = this.leisurely.productDiscountPrice - 0
			let isPackageMail = this.leisurely.isPackageMail
			let transportCosts = isPackageMail ? 0 : this.leisurely.productTransportCosts - 0
			let verifyPayable = this.leisurely.verifyPayable - 0
			return discountPrice + transportCosts + (this.thirdparty? verifyPayable: 0)
		},
	},
	methods: {
		async getDefaultAddress() {
			let addressData = await address.getDefault()
			if(addressData.isDefault){
				this.$store.commit('setStateAttr', {
					key: 'selectAddress',
					val: addressData
				}) 
			}
			
		},
		
		async onSubmit() {
			if(!this.selectAddress.addressId) {
				this.$mTool.showToast({
					title: '请选择收货地址',
					icon: 'none'
				})
				return
			}
			this.$mTool.showLoading('等待支付...')
			let payParams = await leisurely.createOrder(
				this.selectAddress.addressId,
				this.leisurely.productId,
				this.thirdparty,
				this.leisurely.version,
				this.leisurely.productStock
			)
			console.log(payParams);
			try {
				leisurely.wxPay(payParams).then(res => {
					console.log(res);
					const that = this
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.timestamp,
						nonceStr: res.noncestr,
						package: 'prepay_id=' + res.prepayid,
						signType: 'MD5',
						paySign: res.sign,
						success: function (success) {
							that.$mTool.showToast({
								title: '支付成功',
								icon: 'none'
							})
							that.$jumpPages("myidle", {cur: 2})
						},
						fail: function (err) {
							that.$mTool.hideLoading()
							if(err.errMsg == 'requestPayment:fail cancel') {
								that.$mTool.showToast({
									title: '您已取消支付',
									icon: 'none'
								})
							}else{
								that.$mTool.showToast({
									title: '支付失败，请稍后再试',
									icon: 'none'
								})
							}
							
							console.log('fail:' + JSON.stringify(err));
						}
					});
				})
			} catch (e) {
				this.$mTool.hideLoading()
				that.$mTool.showToast({
					title: '支付失败，请稍后再试',
					icon: 'none'
				})
			}
		},
		btnProof(flag) {
			this.thirdparty = flag
			this.proofScheme = false
		}
	}
}
</script>

<style lang="scss" scoped>
	page {
		background: $page-color-base;
		padding-bottom: 110rpx;
	}
	.text-through{
	    text-decoration: line-through;
		color: #909090;
	}
	.address-section {
		min-height: 120rpx;
		padding: 30rpx;
		background: #fff;
		position: relative;
		overflow: hidden;
		margin-top: 20rpx;
		
		.empty-address{
			color: #909090;
			height: 60rpx;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			.left{
				flex: 1;
				font-size: 28rpx;
			}
		}
		.address-content {
			display: flex;
			align-items: center;
		}
		.cuIcon-location{
			width: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50%;
			background-color: $page-color-base;
			font-size: 50rpx;
			text-align: center;
		}
		.cuIcon-right{
			font-size: 32rpx;
			color: $font-color-light;
		}
		.cen {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28rpx;
			color: $font-color-dark;
		}
		.name {
			font-size: 26rpx;
			margin-right: 24rpx;
		}
		.address {
			font-size: 24rpx;
			margin-top: 10rpx;
			margin-right: 20rpx;
			color: $font-color-light;
		}
	}

	.goods-section {
		margin-top: 24rpx;
		background: #fff;
		.shop-warp{
			display: flex;
			align-items: center;
			padding: 30rpx;
			.avatar-warp{
				width: 60rpx;
				height: 60rpx;
				margin-right: 22rpx;
				border-radius: 50%;
				background: #F5F5F5;
			}
			.avatar{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
			.nickname{
				font-size: 30rpx;
				color: #000000;
				margin-right: 22rpx;
			}
		}
		.scen-group{
			padding: 20rpx 30rpx;
		}
		.scen2{
			display: flex;
			position: relative;
			padding-bottom: 20rpx;
			
			.scen-img{
				width: 120rpx;
				height: 165rpx;
				-webkit-flex-shrink: 0;
				flex-shrink: 0;
				position: relative;
				background: #F5F5F5;
				border-radius: 10rpx;
				image{
					border-radius: 10rpx;
					width: 120rpx;
					height: 165rpx;
				}
			}
			.scen-info{
				display: flex;
				flex-direction: column;
				flex: 1;
				overflow: hidden;
				position: relative;
				padding-left: 15px;
				font-size: 14px;
			}
			.scen-info-title{
				line-height: 20px;
				margin-bottom: 24rpx;
				.title{
					font-size: 36rpx;
					color: #000;
					font-weight: 700;
					margin-right: 27rpx;
				}
			}
			.publisher{
				margin-bottom: 30rpx;
				font-size: 24rpx;
			}
			.text-price{
				color: #E42C2C;
				font-size: 32rpx;
				font-weight: 700;
			}
		}
		
		.yt-list {
			background: #fff;
			line-height: 120rpx;
			display: flex;
			align-items: center;
			padding:  0 30rpx;
			font-size: 28rpx;
			.left{
				width: 540rpx;
			}
			.action{
				margin-left: 10rpx;
				flex: 1;
				display: flex;
				justify-content: flex-end;
			}
		}
		
	}
	
	.footer{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		justify-content: space-between;
		background-color: #fff;
		font-size: 24rpx;
		color: #E42C2C;
		font-weight: 700;
		box-shadow: 0 -1px 5px rgba(0,0,0,.1);
		.price-tip{
			margin-left: 8rpx;
		}
		.price{
			font-size: 36rpx;
		}
		.submit{
			width: 200rpx;
			margin-left: 10rpx;
			margin-right: 30rpx;
			color: #fff;
			font-size: 30rpx;
		}
	}
	
	/* 优惠券面板 */
	.mask{
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 9995;
		transition: .3s;
		
		.mask-content{
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y:scroll;
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);
			
			.mask-content{
				transform: translateY(0);
			}
		}
	}

	/* 优惠券列表 */
	.coupon-item{
		display: flex;
		flex-direction: column;
		margin: 20rpx 24rpx;
		background: #fff;
		.con{
			display: flex;
			align-items: center;
			position: relative;
			height: 120rpx;
			padding: 0 30rpx;
			&:after{
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}
		.left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100rpx;
		}
		.title{
			font-size: 32rpx;
			color: $font-color-dark;
			margin-bottom: 10rpx;
		}
		.time{
			font-size: 24rpx;
			color: $font-color-light;
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color: $font-color-base;
			height: 100rpx;
		}
		.price{
			font-size: 44rpx;
			color: $base-color;
			&:before{
				content: '￥';
				font-size: 34rpx;
			}
		}
		.tips{
			font-size: 24rpx;
			color: $font-color-light;
			line-height: 60rpx;
			padding-left: 30rpx;
		}
		.circle{
			position: absolute;
			left: -6rpx;
			bottom: -10rpx;
			z-index: 10;
			width: 20rpx;
			height: 20rpx;
			background: #f3f3f3;
			border-radius: 100px;
			&.r{
				left: auto;
				right: -6rpx;
			}
		}
	}

</style>
